<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>{{ $store.state.msg }}</h2>
    <button @click="change">修改msg</button>
    <br />
    姓名：<input type="text" v-model="name" /> 年龄：<input
      type="text"
      v-model.number="age"
    />
    <button @click="add">添加</button>
    <ul>
      一共{{
        ages
      }}岁 一共{{
        this.$store.getters.vuexages
      }}岁
      <li v-for="(item, index) in $store.state.list" :key="index">
        {{ item.name }}===={{ item.age }}
        <span @click="remove(index)">x</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      age: "",
    };
  },
  mounted() {
    this.$axios.get("data/data.json").then((res) => {
      console.log(res);
      this.$store.commit("setlist", res.data.list);
    });
    //请求初始的data.json 把数据存在vuex
  },
  methods: {
    change() {
      this.$store.commit("fun1");
      //调用mutation的方法，commit只能有两个参数
    },
    add() {
      this.$store.commit("add", { name: this.name, age: this.age });
    },
    remove(index) {
      this.$store.commit("del", index);
    },
  },
  computed: {
    ages() {
      let age = 0;
      this.$store.state.list.forEach((item) => {
        age += item.age;
      });
      return age;
    },
  },
};
</script>
